<template lang="html">
    <div class="yo-scroll"
         :style="{'top' : top + 'rem','bottom': bottom + 'rem','background-color':backgroundColor}"
         :class="{touch:touching}"
         @touchstart="touchStart($event)" 
         @touchmove="touchMove($event)"
         @touchend="touchEnd($event)"
         ref="yoScroll"
    >
      <section class="inner"  ref="yoScrollInner"  :style="{ transform: 'translate3d(0, ' + transateTop + 'px, 0)', 'min-height': minHeight}">
          <header class="pull-refresh" ref="yoScrollHeader">
            <img class="refresh_icon" src="~imgs/components/pull_refresh_icon.gif">
            <div class="down-tip" v-show="state == 0">下拉即可刷新</div>
            <div class="up-tip" v-show="state == 1">释放即可刷新</div>
            <div class="refresh-tip" v-show="state == 2">正在刷新</div>
            <div class="refresh-finish" v-show="state == 3">刷新完成</div>
          </header>
          <slot></slot>
      </section>
    </div>
</template>

<script>
export default {
  props: {
    // 面版顶部
    top: {
      type: Number,
      required:false
    },

    // 面板的底部
    bottom: {
      type: Number,
      default: 0
    },
    // 背景色
    backgroundColor:{
      type: String,
      default: '#ffffff'
    },
    // 能否下拉刷新
    enableRefresh: {
      type: Boolean,
      default: true
    },
    minHeight:{
      type:String,
      default:'100%'
    }
  },
  data() {
    return {
      offset: 100, // 滑动触发更新的距离
      resultTop: 0, // 下拉刷新面版的顶部距离 单位rem

      enablePullDownFlagHeight: 0, // 当inner的顶部距离屏幕顶部的值大于该值是可以下拉
      state: 0, // 下拉刷新状态 0未下拉 1松开刷新 2刷新中 3刷新完成
      touching: false, // 是否在触摸

      transateTop: 0,
      startY: 0,
      scrollTopFlag:0,
      transitionDuration:300,

      refreshTimer:null
    };
  },
  methods: {
    initUpRefreshData() {
      var windowWidth = window.screen.width;
      this.offset = windowWidth / 7.5 * 2;
      this.resultTop = this.top;

      if(this.resultTop || this.resultTop === 0){
        this.enablePullDownFlagHeight = -(windowWidth / 7.5) * 2.01;
        return;
      };

      if (Global.android) {
        // android机型
        this.resultTop = 0.88;
      } else {
        // ios机型
        if (Global.iphoneX) {
          this.resultTop = 1.76;
        } else {
          this.resultTop = 1.28;
        }
      }
      this.enablePullDownFlagHeight = -(windowWidth / 7.5) * (2 - this.resultTop + 0.01);
    },
    touchStart(e) {
      this.startY = e.targetTouches[0].pageY;
      this.startScroll = this.$el.scrollTop || 0;
      this.touching = true;
    },
    touchMove(e) {
      let yoScrollHeader = this.$refs.yoScrollHeader;
      let flagTop = yoScrollHeader.getBoundingClientRect().top;

      if (
        !this.enableRefresh ||
        flagTop < this.enablePullDownFlagHeight ||
        !this.touching
      ) {
        return;
      }
      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll;
      if (diff > 0) e.preventDefault();
      this.transateTop = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0);

      if (this.state == 2) {
        // 刷新中
        return;
      }
      if (this.transateTop >= this.offset) {
        this.state = 1;
      } else {
        this.state = 0;
      }
    },
    touchEnd(e) {
      if (!this.enableRefresh) return;
      this.touching = false;
      if (this.state == 2) {
        // 还在刷新中
        this.state = 2;
        this.transateTop = this.offset;
        return;
      }
      if (this.transateTop >= this.offset) {
        // 去刷新
        this.refresh();
      } else {
        // 取消刷新
        this.state = 0;
        this.transateTop = 0;
      }
    },
    refresh() {
      this.state = 2;
      this.transateTop = this.offset;
      this.onRefresh(this.refreshDone);
    },
    refreshDone() {
      this.state = 3;
      // this.transitionDuration = 300;
      //ios动画底部多出影响
      // setTimeout(()=>{
      //   this.transateTop = 1;
      // },200);
      setTimeout(() => {
        this.state = 0;
        this.transateTop = 0;
        // this.transitionDuration = 0;
      }, 500);
    },

    // 刷新前所有数据置空
    onRefresh(done) {
      this.$emit("refresh", done);

      // 15秒不会回弹算超时
      this.refreshTimer = setTimeout(()=>{
         if(this.state == 2){
           this.refreshDone();
         }
      },15000)
    },
    saveScrollTop(){
      this.scrollTopFlag = this.$refs.yoScroll.scrollTop;
    },
    recoverScrollTop(){
      this.$refs.yoScroll.scrollTop = this.scrollTopFlag;
    }
  },
  mounted() {
    this.initUpRefreshData();
  }
};
</script>
<style scoped>
.yo-scroll {
  position: absolute;
  /* left: 50%;
  width: 7.5rem;
  margin-left: -3.75rem; */
  left: 0;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.yo-scroll .inner {
  position: absolute;
  top: -1rem;
  width: 100%;
  transition-duration: 300ms;
  color: #999;
  font-size: 0.28rem;
  min-height: 130%;
}

.yo-scroll.touch .inner {
  transition-duration: 0ms;
}
.yo-scroll .pull-refresh {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  padding-left:2.6rem;
}
.yo-scroll .pull-refresh .refresh_icon {
  height: 0.44rem;
  margin-right: 0.2rem;
  width: auto;
}
</style>
